.box {
    --max-height: calc(var(--max-width, 240px) * 0.77);
    --height: calc(var(--box-width, 48vw) * 0.77);
    overflow: hidden;
    max-width: var(--max-width, 240px);
    width: var(--box-width, 48vw);
    background-image: var(--box-bg-image, url("../../assets/box5.png"));
    background-size: cover;
    background-position: center;
    margin-bottom: var(--box-bottom, 10px);
}

.box>.main {
    --max-cancas-height: calc(var(--max-height) - 1em - 10px);
    max-width: var(--max-width, 240px);
    max-height: var(--max-cancas-height);
    --cancas-height: calc(var(--height) - 1em - 10px);
    width: var(--box-width, 48vw);
    height: var(--cancas-height)
}

.title {
    height: 1em;
    text-align: center;
    color: var(--color-white);
    margin-top: 8px;
}

.title::after {
    content: "-";
}

.title::before {
    content: "-";
}